<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-button type="primary" size="small">OTA升级</el-button>
      <el-button type="primary" size="small"></el-button> -->
      <el-button size="small" type="primary" @click="dialogVisible1 = true">{{ $t('equipment.OTA_upgrade') }}</el-button>
      <el-button size="small" type="primary" @click="dialogVisible2 = true">{{ $t('equipment.upload_signed') }}</el-button>
      <!-- <form name="form" action="/access/service/receiveFile" method="post" enctype="multipart/form-data">
        <input type="file" name="">
        <input type="text" name="">
        <input type="submit" value="提交">
      </form> -->
      <el-dialog :title="$t('equipment.OTA_upgrade')" :visible.sync="dialogVisible1" width="30%" @close="reset('OTA')">
        <span>
          <el-upload class="upload-demo" drag action="#" :on-success="handleSuccess" :before-upload="beforeUpload" :before-remove="beforeRemove" :on-exceed="handleExceed" :http-request="OTAFileUpload"
            :file-list="fileList" :limit='1'>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">{{ $t('equipment.OTA_upgrade') }}</div>
            <!-- <el-button size="small" type="primary">上传OTA更新包</el-button> -->
          </el-upload>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible1 = false">{{ $t('equipment.cancel') }}</el-button>
          <el-button type="primary" @click="OTASubmit()">{{ $t('equipment.confirm') }}</el-button>
        </span>
      </el-dialog>

      <el-dialog :title="$t('equipment.upload_signed')" :visible.sync="dialogVisible2" width="30%" @close="reset('signed')">
        <span>
          <el-upload class="upload-demo" drag action="#" :on-success="handleSuccess2" :before-upload="beforeUpload2" :before-remove="beforeRemove" :on-exceed="handleExceed" :http-request="signedFileUpload"
            :file-list="SignedList" :limit='1'>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">{{ $t('equipment.upload_signed') }}</div>
            <!-- <el-button size="small" type="primary">上传OTA更新包</el-button> -->
          </el-upload>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">{{ $t('equipment.cancel') }}</el-button>
          <el-button type="primary" @click="signedSubmit()">{{ $t('equipment.confirm') }}</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import store from "@/store";
import { OTAUpdate, SignedUpdate } from "@/api/equipment/otaupdate";

export default {
  data() {
    return {
      fileList: [],
      SignedList: [],
      uploadFile: undefined,
      signedFile: undefined,
      dialogVisible1: false,
      dialogVisible2: false,
      OTAFormData:undefined,
      signedFormData:undefined,
    };
  },
  methods: {
    // OTA文件上传开始
    OTAFileUpload(file) {
      let self = this;
      let formData = new FormData();
      formData.append("file", self.uploadFile);
      self.OTAFormData = formData
    },
    handleExceed(files, fileList) {
      this.$message.warning('只能上传一个文件');
    },
    //在上传之前把文件存一下
    beforeUpload(file) {
      this.uploadFile = file;
    },
    handleSuccess({ result, header }) {
      // SignedUpdate(this.$store.getters.token, formData);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    OTASubmit() {
      OTAUpdate(this.$store.getters.token, this.OTAFormData).then(()=>{
        this.$message.success("操作成功")
        this.dialogVisible1 = false
      });
    },
    // OTA文件上传结束 -----------

    // signed文件上传开始
    signedFileUpload(file) {
      let self = this;
      let formData = new FormData();
      formData.append("file", self.signedFile);
      self.signedFormData = formData
      // SignedUpdate(this.$store.getters.token, formData);
    },
    //在上传之前把文件存一下
    beforeUpload2(file) {
      this.signedFile = file;
    },
    handleSuccess2({ result, header }) {},
    signedSubmit() {
      SignedUpdate(this.$store.getters.token, this.signedFormData).then(()=>{
        this.$message.success("操作成功")
        this.dialogVisible2 = false
      });
    },
    // signed文件上传结束 -----------

    reset(data) {
      if (data === "OTA") {
        this.fileList = [];
        this.uploadFile = undefined;
        this.OTAFormData = undefined;
      }
      if (data === "signed") {
        this.SignedList = [];
        this.signedFile = undefined;
        this.signedFormData = undefined;
      }
    },
  },
};
</script>

<style>
</style>

<style scoped>
/* 设置输入框样式 start */
div >>> .el-input__inner {
  border-radius: 2px;
  height: 32px;
}

div >>> .el-input__icon {
  line-height: 32px;
}
/* 设置输入框样式 end */

.filter-container {
  margin-bottom: 8px;
}

.app-container {
  border: #eee solid 10px;
}
</style>
